<template>
	<uni-file-picker v-model="data.imageValue" :fileMediatype="props.fileMediatype" :limit="props.limit" mode="grid"
		:auto-upload="false" :sizeType="['compressed']" :sourceType="['album', 'camera']"
		@select="data.select" @delete="data.delete" :readonly="props.readonly" />
</template>

<script setup>
const props = defineProps({
	modelValue: {
		default: () => ''
	},
	limit:{default:()=>1},
	fileMediatype:{
		default:()=>'image'
	},
	readonly:{
		default:()=>false
	}
})

const emits = defineEmits(['update:modelValue'])

const data = Vue.reactive({
	imageValue: [],
	async select(e) {
		for (let v of e.tempFiles) {
			let res = await Vue.uploadFile('base/file/upload', v.path)

			data.imageValue.push({
				name: v.name,
				extname: v.extname,
				url: res.url,
				uuid: v.uuid,
			})
		}

		emits('update:modelValue', data.imageValue.map(v => v.url).join(','))

	},
	delete(e) {
		data.imageValue.splice(data.imageValue.findIndex(v => v.uuid == e.tempFile.uuid), 1)

		emits('update:modelValue', data.imageValue.map(v => v.url).join(','))
	}
})

let modelValue = props.modelValue ? props.modelValue.split(',') : []
for(let v of modelValue){
	data.imageValue.push({
		name: v,
		url: v,
	})
}
</script>